<template>
      <el-row :gutter="20">
        <el-col :span="16"> 
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="考试名称" style="font-weight: 800;" prop="examinationName">
           <span></span>
            <el-input
               v-model="queryParams.examinationName"
               placeholder="请输入考试名称"
               clearable
               style="width: 240px"
            />
         </el-form-item>
      
         <el-form-item label="考试时间" style="width: 308px; font-weight: 800;" prop="beginTime">
            <el-date-picker
               v-model="queryParams.beginTime"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="findStudentInfo" style="width: 73px; height: 28px; font-size: 10px;">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery(queryRef)" style="width: 73px; height: 28px; font-size: 10px;">重置</el-button>
         </el-form-item>
      </el-form>
    </el-col> 
      <el-tooltip  class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
               v-if="search">
               <el-button circle icon="Search" @click="toggleSearch()" />
             </el-tooltip>
             <el-tooltip class="item" effect="dark" content="刷新" placement="top">
             <el-button circle icon="Refresh" @click="refresh()"/>
      </el-tooltip>
</el-row>
   <!-- 列表查询 -->
   <el-table v-loading="loading" :data="classList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#eee', color: '#909399' }">
              <template #empty v-if="classList.length == 0">
                <el-empty description="暂时还没有考试信息哦~" />
              </template>
              <el-table-column label="编号" align="center" key="id" prop="id" v-if="false"/>
              <el-table-column label="考试名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
              <el-table-column label="目前阶段" align="center" key="nameSlp" prop="nameSlp" :show-overflow-tooltip="true" />
              <el-table-column label="开始时间" align="center" key="beginTime" prop="beginTime" :show-overflow-tooltip="true" />
              <el-table-column label="结束时间" align="center" key="endTime" prop="endTime" :show-overflow-tooltip="true" />
              <!-- <el-table-column label="考试时长" align="center" key="examDuration" prop="examDuration" :show-overflow-tooltip="true" /> -->
              <el-table-column label="总分" align="center"  prop="totalScore" class-name="small-padding fixed-width"/>
              <el-table-column label="及格分" align="center" prop="passScore" class-name="small-padding fixed-width"/>   
              <el-table-column label="考试状态" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                   <el-tag v-if="scope.row.state==0" type="info" size="small" plain>未开始</el-tag>
                   <el-tag v-if="scope.row.state==1" type="primary"  size="small" plain>考试中</el-tag>
                   <el-tag v-if="scope.row.state==2" type="warning"  size="small" plain>已结束</el-tag>
                </template>
              </el-table-column>    
              <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
                 <template #default="scope">
                       <el-button type="primary"  @click="studentExamin(scope.row)" icon="CaretRight" :loading-icon="Eleme" :loading="scope.row.startloading" round v-if="scope.row.answerId == null && scope.row.state == 1">开始答题</el-button>
                       <el-button type="primary" icon="CaretRight" :loading-icon="Eleme" :loading="scope.row.startloading" round  v-if="scope.row.answerId != null && scope.row.state == 1" disabled>已提交</el-button>
                       <el-button type="info"  @click="stu_dtn_title(scope.row)" icon="CaretRight"  round v-if="scope.row.state == 0">未开始</el-button>
                       <el-button type="warning" @click="stu_dtn_end(scope.row)" icon="CaretRight"  round v-if="scope.row.state == 2">考试结束</el-button>
                 </template>
              </el-table-column>
           </el-table>
           <br/>
           <br/>
             <!-- 分页 -->
             <el-pagination
             style="margin-left: 0px;"       
             v-model:current-page="currentPage4"
             v-model:page-size="pageSize4"
             :page-sizes="[5, 10, 15, 20]"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             background
           />
</template>
<script setup>
import { ref } from "vue";
import { classExaminationInfo,examinationQuestion } from "@/api/user/examination/examination_api";
import { useUserStore1 } from '@/store/userStore.js';
// import router from "@/router";
import { useRouter,useRoute } from 'vue-router';
import { useflagStore } from "@/store/flagStore";
import { useExaminationStore1 } from "@/store/examinationStore";
import { ElMessage, ElNotification } from 'element-plus'
import { useExamina_Store1 } from "@/store/examina_Store";
const router = useRouter()
const route = useRoute()
// const id = ref(route.query.userId)
const userInfo = useUserStore1().userInfo;
const queryRef = ref()
const startloading = ref(false) //开始答题按钮
const loading =ref(true)    //页面全局加载
const showSearch = ref(true); //动态隐藏
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const classList = ref([]) //查询所有
const total = ref()

//要查询的班级的参数
const queryParams = ref({
   pageNum:currentPage4.value,
   pageSize:pageSize4.value,
   classId:userInfo.classId,
   examinationName:'',
   uid:userInfo.userId,
   beginTime:[]
})

//通过学生id查看最近考试情况
function findStudentInfo(){
  loading.value=true
  classExaminationInfo(queryParams.value).then(res=>{
      loading.value=false
    if(res.data.code == 200){
      classList.value=res.data.obj.list
      total.value = res.data.obj.total
      classList.value.forEach(element => {
          if(element.beginTime != null){
              element.beginTime=caseTime(element.beginTime)
          }
          if(element.endTime != null){
              element.endTime=caseTime(element.endTime)
          }
      });
    }
  })
}

//控制条数
const handleSizeChange = (val) => {
   queryParams.value.pageSize=val
   findStudentInfo()
}
//控制页数
const handleCurrentChange = (val) => {
   queryParams.value.pageNum=val
   findStudentInfo()
}

/**学生准备进入试卷详情考试 */
function studentExamin(row){
   //  localStorage.setItem("examId",row.id)//存入试卷id
   //  localStorage.removeItem("endTime")//先清除
   //  localStorage.setItem("endTime",row.endTime)//在存结束时间
   useExamina_Store1().clearExamina()//先清除
   useExamina_Store1().setexamin_Array(row)
    row.startloading=true
    setTimeout(() => {  
  examinationQuestion(row.id).then(res => {  
   row.startloading = false;  
    if(res.data.code === 200) {
      //查询出来的题量  
      useExaminationStore1().setexaminationArray(res.data.obj); //将查询出来的试卷存入pinia中
      useflagStore().setFalgInfo(false)  //用于控制隐藏头部 和 菜单
      router.push("/user/studentanswer")
     }else{
      ElMessage.warning(res.data.message)
     }  
  })}, 1000);
  /**判断用户摄像头权限是否禁用 */
  setTimeout(()=>{
   if(route.query.falg == 'false'){
      ElNotification({
      title: '温馨提示',
      message: '请先打开视像头权限哦',
      type: 'warning',
    })
    }
  },1000)
}

//未开始
function stu_dtn_title(row){
   ElMessage.warning("请耐心等待开考时间哦")
}
//已结束
function stu_dtn_end(row){
   ElMessage.warning("该场考试已结束哦")
}

const props = defineProps({
 /* 是否显示检索条件 */
 showSearch: {
    type: Boolean,
    default: true,
 },
 /* 显隐列信息 */
 columns: {
    type: Array,
 },
 /* 是否显示检索图标 */
 search: {
    type: Boolean,
    default: true,
 },
 /* 显隐列类型（transfer穿梭框、checkbox复选框） */
 showColumnsType: {
    type: String,
    default: "checkbox",
 },
 /* 右外边距 */
 gutter: {
    type: Number,
    default: 10,
 },
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
// 搜索
function toggleSearch() {
if (showSearch.value == true) {
   showSearch.value = false
} else {
   showSearch.value = true
}
emits("update:showSearch", !props.showSearch);
}
// 刷新
function refresh() {
findStudentInfo()
}
findStudentInfo()

//动态查询重置
const resetQuery = (formEl) => {
 if (!formEl) return
 formEl.resetFields() 
 findStudentInfo()
}

/**时间转换 */
function caseTime(date){
  let time=new Date(date);
  let year=time.getFullYear();
  let month=time.getMonth()+1;
  let day=time.getDate();
  let hours=time.getHours();
  let minutes=time.getMinutes();
  if(month<=9){
      month='0'+month
  }
  if(day<=9){
     day='0'+day
  }
  if(hours<=9){
    hours='0'+hours
  }
  if(minutes<=9){
    minutes='0'+minutes
  }
  return year+"-"+month+"-"+day+" "+hours+":"+minutes;
}

/**退回状态刷新 */
if (!document.fullscreenElement) { 
   // location.reload();
  } else {  
   // location.reload();//刷新
  }  
</script>
<style>
html,body{
  background: white;
}
</style>